<template>
    <div class="img-show">
        <span class="img-icon" :class="[size]">
            <vue-avatar :shape="shape" :username="name" :src="url" :size="size"></vue-avatar>
        </span>
        <span class="img-info">
            <p class="img-info__title" v-if="name">{{ name }}</p>
            <p class="img-descr" v-if="subname">{{ subname }}</p>
        </span>
    </div>

</template>
<script>
    import vueAvatar from './vueAvatar';
    export default {
        name: 'imgShow', // 头像姓名组件
        props: {
            url: {
                default: ''
            },
            name: {
                default: ''
            },
            subname: {
                default: ''
            },
            size: { // 图片大小
                type: Number,
                default: 38
            },
            shape: {
                type: String,
                default: 'circle'
            }
        },
        components: { vueAvatar },
        data() {
            return {
                
            }
        },
    }

</script>
<style lang="scss" scoped>
.img-show {
    display: flex;
    align-items: center;
    .img-icon {
        margin-right: 10px;
    }

    .img-info {
        flex: 1;
        overflow: hidden;
        align-self: center;
        text-align: left;

        .img-info__title {
            font-size: 14px;
        }

        .img-descr {
            font-size: 12px;
            color: #999;
        }

        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }

}
</style>
